<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        body {
            /* 设置透视点 */
            perspective: 1000px;
        }

        #cube {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            /* 保留3D效果 */
            transform-style: preserve-3d;
            /* transition: all 1s linear; */
        }

        .page {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            /* 设置透明度 */
            opacity: 0.6;
            box-shadow: 0 0 10px rgb(100, 99, 99);

        }

        /* .cube:hover {
            transform: rotate3d(20, 0, 0, 360deg);
        } */

        .nood_front {
            background: no-repeat url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596018188816&di=be74054e8c2d9d315128036c1a802b38&imgtype=0&src=http%3A%2F%2Fp3.ssl.cdn.btime.com%2Ft0118a91e715c7643a5.jpg%3Fsize%3D580x385');
            background-size: 100% 100%;
            transform: translateZ(100px);
            animation:nood_front 1s infinite linear alternate;
        }

        .nood_back {
            background: no-repeat url('https://img.solves.com.cn/p/2019/07-03/1785c0c80d7fd2512c01f344e6855b6b.jpg');
            background-size: 100% 100%;
            transform: translateZ(-100px) rotateY(180deg);
            animation:nood_back 1s infinite linear alternate;
        }

        .nood_left {
            background: no-repeat url('http://static.oschina.net/uploads/img/201403/25072156_eWdU.jpg');
            background-size: 100% 100%;
            transform: translateX(-100px) rotateY(90deg);
            animation:nood_left 1s infinite linear alternate;
        }

        .nood_right {
            background: no-repeat url('https://www.seoxiehui.cn/data/attachment/portal/201805/30/132252x1q5fjm3s3nn3j4u.jpg');
            background-size: 100% 100%;
            transform: translateX(100px) rotateY(-90deg);
            animation:nood_right 1s infinite linear alternate;
        }

        .nood_top {
            background: no-repeat url('https://bkimg.cdn.bcebos.com/pic/4afbfbedab64034f29596c8ba6c379310b551da2?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg');
            background-size: 100% 100%;
            transform: translateY(-100px) rotateX(90deg);
            animation:nood_top 1s infinite linear alternate;
        }

        .nood_bottom {
            background: no-repeat url('https://img.solves.com.cn/p/2019/07-03/10b42b891b5bb368c7e814fdf3c741bc.jpg');
            background-size: 100% 100%;
            transform: translateY(100px) rotateX(-90deg);
            animation:nood_bottom 1s infinite linear alternate;
        }


        @keyframes nood_front {
            from {
                transform: translateZ(100px);
            }
            to {
                transform: translateZ(200px);
            }
        }

        @keyframes nood_back {
            from {
                transform: translateZ(-100px) rotateY(180deg);
            }
            to {
                transform: translateZ(-200px) rotateY(180deg);
            }
        }

        @keyframes nood_left {
            from {
                transform: translateX(-100px) rotateY(90deg);
            }
            to {
                transform: translateX(-200px) rotateY(90deg);
            }
        }

        @keyframes nood_right {
            from {
                transform: translateX(100px) rotateY(-90deg);
            }
            to {
                transform: translateX(200px) rotateY(-90deg);
            }
        }

        @keyframes nood_top {
            from {
                transform: translateY(-100px) rotateX(90deg);
            }
            to {
                transform: translateY(-200px) rotateX(90deg);
            }
        }

        @keyframes nood_bottom {
            from {
                transform: translateY(100px) rotateX(-90deg);
            }
            to {
                transform: translateY(200px) rotateX(-90deg);
            }
        }
    </style>
</head> 

<body>
    <!-- <p>
            1. perspective设置透视点，可以设置为任意值，但通常推荐设置为600-1000之间
            2.位移（translate）
                transform: translateX(n)
                让元素沿着x轴移动
                    设置正数: 从左向右
                    设置负数: 从右向左
                transform: translateY(n)
                让元素沿着Y轴移动
                    设置正数: 从上向下
                    设置负数: 从下向上
                transform: translateZ(n) - 新效果 配合perspective使用
                    让元素沿着Z轴移动
                        设置正数: 朝向我们视线移动(靠近我们)
                        设置负数: 背向移动(远离我们)
            3. 旋转（rotate）
                rotateX(angle)
                    方向判断利用左手原则
                rotateY(angle)
                    方向判断利用左手原则
                rotateZ(angle)
                    方向判断利用左手原则
            4.缩放（scale）
                scaleX()
                    沿着x轴放大或缩小
                scaleY()
                    沿着y轴放大或缩小
                scaleZ()
                    沿着Z轴放到或缩小
            5.倾斜（skew）
                skewX()
                    沿着x轴倾斜，x轴方向的两条边平行
                skewY()
                    沿着y轴倾斜，y轴方向的两条边平行
            6.子元素保留3D转换
                transform-style: flat；
                transform-style: preserve-3d;
                flat 不保留3d转换，默认值
                preserve-3d; 子元素保留3d转换，如果不设置这个属性，内部元素不会存在3D的遮挡关系(伪3D)
    </p> -->

    <div id="cube">
        <div class="page nood_front"></div>
        <div class="page nood_back"></div>
        <div class="page nood_left"></div>
        <div class="page nood_right"></div>
        <div class="page nood_top"></div>
        <div class="page nood_bottom"></div>
    </div>
</body>
<script>
    document.onmousedown = function (event) {
        var that = document.getElementById('cube');
        var reg = /\-?[0-9]+\.?[0-9]*/g;
        var bf = that.style.transform || '0,0';
        var arr = bf.match(reg);
        var bfX = Number(arr[0]);
        var bfY = Number(arr[1]);
        var startX = event.pageX;
        var startY = event.pageY;
        document.onmousemove = function (event) {
            var disX = event.pageX - startX;
            var disY = event.pageY - startY;
            var y = (disX + bfY) % 360;
            var x = -(disY + bfX) % 360;
            that.style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(0deg)";
        };

        document.onmouseup = function (event) {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    }
</script>

</html>
